<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 这个transition  是 简写属性 */
            /* transition: all ease .8s; */
            /* 指定参与变化的属性 all代表所有属性参与过度*/
            transition-property: all;
            /* `transition-duration`   定义过渡效果花费的时间 */
            transition-duration: 0.4s;
            /* `transition-delay` 规定过渡效果何时开始(延迟时间)。默认是 0 */
            transition-delay: 1s;

            /* `transition-timing-function`  规定过渡效果的时间曲线(运动函数)。默认是 "ease"。 */
            /* linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); */
            transition-timing-function: linear;
        }

        .box:hover{
            height: 400px;
            width: 300px;
        }

        /* 1.  哪些属性  可以参与过渡  宽高  位置(left/right/top/bottom) /透明度 opacity*/
        /* 2.  运动函数 */
        /* 3. transition  加给谁?(结束状态 还是 开始状态) */

        .d1{
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: orange;
            transition: all ease .8s;
            opacity: 1;

        }
        .d1:hover{
            width: 250px;
            height: 250px;
            left: 20px;
            top: 20px;
            opacity: 0.5;
        }

        /* 位置移动动.  left  .... 
        margin */
    </style>
</head>
<body>
    <!-- 过渡  就是 有 一个状态 变到  另外一个状态 ,为我们自动补全了 中间的 变化过程 (平滑了) -->
    <!-- 让这个变化  平滑 -->
    <!-- tarnsition   状态变换之间的  润滑剂 -->


    <!-- 基于 transition 可以让元素的某个 CSS 属性从指定的开始状态过渡到特定的结束状态。
    我们将元素「从指定的开始状态过渡到特定的结束状态」这个过程简称为「状态变换」 -->
    <!-- <div class="box">

    </div> -->

    <div class="d1">

    </div>
</body>
</html>